<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>只因美医院</title>
    <link rel="stylesheet" href="./css/fullpage.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link href="static/css/cubeportfolio.min.css" rel="stylesheet">
    <link href="static/css/owl.carousel.css" rel="stylesheet">
    <link href="static/css/owl.theme.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .ppp{
            padding-bottom: 10px;
        }
        .section2 {
            background: url(./img/white.png) 50%;
        }

        .fullscreenvideo {
            position: absolute;
            top: 0px;

            right: 0;

            bottom: 0;

            min-width: 100%;

            min-height: 100%;
            width: 100%;



            z-index: -999;
        }

        .ztl-li {
            list-style: none;
            position: relative;
            top: 15px;
        }

        ul li a {
            text-decoration: none;
            color: black;

        }

        ul li {
            display: inline;
            padding-left: 60px;
        }

        .ztl-div {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 1750px;
            background: white;
            opacity: 0.4;
            height: 50px;
        }

        .ztl-h3 {
            position: 0px;
            display: inline;
        }

        #logo {
            position: absolute;
            top: -20px;
            left: 400px;
            width: 90px;
            height: 110px;
            display: inline;
        }

        .zymwz {
            font-size: large;
        }

        #zymwz-img {
            position: absolute;
            top: 20%;
            left: 32%;
            width: 30%;
            height: 35%;
            display: none;
        }

        .zymwz1 {
            position: absolute;
            top: 45%;
            left: 23%;
            display: none;
        }

        .zymwz-p {
            color: white;
            font-size: 30px;
        }

        .zymwz-p1 {
            color: white;
            font-size: large;
            text-indent: 15%;
            padding-top: 10px;
        }

        .arrow {
            opacity: 1;
            animation: arrow 3s cubic-bezier(.5, 0, .1, 1) infinite;
            -webkit-animation: arrow 3s cubic-bezier(.5, 0, .1, 1) infinite;
            position: absolute;
            top: 88%;
            left: 50%;
            margin-left: -30px;
            width: 130px;
            height: 130px;
            line-height: 60px;
            cursor: pointer;
            background-image: url(./img/xiayige.png);
            /* 这里放箭头图片路径 */
            background-repeat: no-repeat;
            background-size: 100%;
        }

        #jsonTip {
            position: absolute;
            top: 1.5%;
            right: 9%;
            font-size: large;
        }

        #datetime {
            position: absolute;
            top: 1.5%;
            left: 3%;
            font-size: large;
        }

        .beian {
            position: absolute;
            bottom: 10px;
            align-items: center;
            left: 47%;
        }
    </style>

    <script src="./js/jq.js"></script>
    <script src="./js/fullpage.js"></script>
    <script>

        setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
        $(function () {
            $('#dowebok').fullpage({
                navigation: true,
                afterLoad: function (anchorLink, index) {
                    if (index == 2) {
                        $('.section2').find('p').delay(500).animate({
                            left: '0'
                        }, 1500, 'easeOutExpo');
                    }
                    if (index == 3) {
                        $('.section3').find('p').delay(500).animate({
                            bottom: '0'
                        }, 1500, 'easeOutExpo');
                    }
                    if (index == 4) {
                        $('.section4').find('p').fadeIn(2000);
                    }
                },
                onLeave: function (index, direction) {
                    if (index == '2') {
                        $('.section2').find('p').delay(500).animate({
                            left: '-120%'
                        }, 1500, 'easeOutExpo');
                    }
                    if (index == '3') {
                        $('.section3').find('p').delay(500).animate({
                            bottom: '-120%'
                        }, 1500, 'easeOutExpo');
                    }
                    if (index == '4') {
                        $('.section4').find('p').fadeOut(2000);
                    }
                }



            });

            setTimeout(function () { $('#zymwz-img').css("display", "block") }, 2500);
            setTimeout(function () { $('.zymwz1').css("display", "block") }, 3500);


            $('.arrow').click(function () {
                $.fn.fullpage.moveSectionDown();
            });

            $.ajax({
                type: "GET",
                url: "https://tianqiapi.com/api?version=v6&appid=11151254&appsecret=NhY2Pm3k",
                dataType: 'JSON',
                success: function (Object) {
                    // 成功的回调
                    console.log(Object);
                    var $jsontip = $("#jsonTip");
                    var strHtml = "";//存储数据的变量
                    $jsontip.empty();//清空内容
                    strHtml = '洛阳' + ' ' + Object['wea'] + Object['tem'] + '°c' + '~' + Object['tem1'] + "°c"
                    $jsontip.html(strHtml);//显示处理后的数据	
                }
            });

            dateTimeFormate($.ajax({ async: false }).getResponseHeader("Date"))

            // 获取网络端的时间
            function dateTimeFormate(date) {
                if (!date) {
                    return
                } else {
                    var d = new Date(date);
                    var year = d.getFullYear();
                    var month = ('0' + (d.getMonth() + 1)).slice(-2);
                    var day = ('0' + (d.getDate())).slice(-2);
                    var hour = ('0' + (d.getHours())).slice(-2);
                    var minutes = ('0' + (d.getMinutes())).slice(-2);
                    var seconds = ('0' + (d.getSeconds())).slice(-2);
                    return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
                }
            }


        });

        var video = document.getElementById('v1');
        video.playbackRate = 0.5;

        // 请求

    </script>
</head>

<body>
    <!-- 主页面 第一页 -->
    <div id="dowebok">
        <div class="section section1" id="a">
            <div class="videocontainer">
                <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
                    <source src="./img/homepage.mp4" type="video/mp4">
                </video>
                <!-- </div>\ -->
                <div class="ztl-div">
                    <img src="./img/logo.png" id="logo">
                    <center>
                        <ul class="ztl-li">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="sideText.html">关于我们</a></li>
                            <li><a href="zxzx.html">在线问诊</a></li>
                            <li><a href="jkkp.html">健康科普</a></li>
                            <li><a href="news.html">新闻中心</a></li>
                            <li><a href="map.html">位置导航</a></li>
                            <li><a href="bendilyb.html">用户留言</a></li>
                        </ul>
                    </center>
                </div>
            </div>

            <div class="zymwz"><img src="./img/logo.png" id="zymwz-img"></div>

            <div class="zymwz1">
                <p class="zymwz-p">只因美宠物医院是一家致力于提升宠物幸福，救治宠物，改善宠物状况的医院。</p>
                <p class="zymwz-p1">只因美宠物医院隶属于苏珊宠物医疗集团。首家只因美宠物医院成立于2020年6月，</p>
                <p class="zymwz-p1">目前在全国已经有两年半的运营时间。只因美宠物医院每年为数十万养宠爱宠人士</p>
                <p class="zymwz-p1">提供优质宠物服务，涵盖宠物医疗保健、美容造型、洗浴、SPA、食品及用品等。</p>
            </div>

            <!-- 天气预报 -->
            <div id="jsonTip">
            </div>
            <!-- 时间板块 -->
            <div id="datetime"></div>

            <!-- 下一页箭头 -->
            <div class="arrow "></div>

        </div>
        <!-- 页面1结束 -->


       <!-- 页面2 主页部分 -->

        <div class="section section2">
            <diV class="case">
                <div class="container">
                    <div class="row">
                        <div class="title">
                            <img src="static/images/h_1.png" class="title_img">
                            <div class="title_top">
                                <h2><a href="product.html">医疗设施</a></h2>
                                <span>Medical Equipment</span>
                            </div>
                            <img src="static/images/h_2.png" class="title_img">
                        </div>
                        <div class="news-liebiao clearfix">
                            <div id="js-grid-masonry" class="cbp">
                                <div class="cbp-item wuxianchanpin">
                                    <a href="static/images/pc4.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc4.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">B超检查</div>
                                                    <div class="cbp-l-caption-desc">Classic black</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item MINATO">
                                    <a href="static/images/pc2.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc2.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">美容spa</div>
                                                    <div class="cbp-l-caption-desc">美容加spa让您的狗狗焕然一新。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item MINATO">
                                    <a href="static/images/pc6.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc6.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">spa</div>
                                                    <div class="cbp-l-caption-desc">养生spa，宠物也可以享受这个。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item MINATO">
                                    <a href="static/images/pc8.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc8.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">美容修整</div>
                                                    <div class="cbp-l-caption-desc">修修剪剪，还您一个貌美的小宠物。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item MINATO">
                                    <a href="static/images/pc7.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc7.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">美容</div>
                                                    <div class="cbp-l-caption-desc">爱美是人的天性，给宠物一个美丽的容貌。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item ELNEC">
                                    <a href="static/images/pc5.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc5.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">化验检查</div>
                                                    <div class="cbp-l-caption-desc">抽血检验，粪便检查，精细到每一个环节。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item eMMC">
                                    <a href="static/images/pc1.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc1.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">手术台</div>
                                                    <div class="cbp-l-caption-desc">独立封闭的手术室，无菌环境。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="cbp-item Dediprog">
                                    <a href="static/images/pc3.jpg" class="cbp-caption cbp-lightbox">
                                        <div class="cbp-caption-defaultWrap">
                                            <img src="static/images/pc3.jpg" alt="">
                                        </div>
                                        <div class="cbp-caption-activeWrap">
                                            <div class="cbp-l-caption-alignCenter">
                                                <div class="cbp-l-caption-body">
                                                    <div class="cbp-l-caption-title">x光拍摄</div>
                                                    <div class="cbp-l-caption-desc">全方位的拍摄检查，渗透到每一个部位。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </diV>
            <!-- 下一页箭头 -->
            <div class="arrow "></div>

        </div>

        <div class="section section3">
            <!--我们服务-->
            <div class="service">
                <div class="container">
                    <div class="row">
                        <div class="title">
                            <img src="static/images/h_1.png" class="title_img">
                            <div class="title_top">
                                <h2>医疗服务</h2>
                                <span>Medical Service</span>
                            </div>
                            <img src="static/images/h_2.png" class="title_img">
                        </div>
                        <img src="static/images/service.jpg" class="service_img1">
                        <div class="service_top">
                            <img src="static/images/gou.png" class="service_img">
                            <div class="service_top1">
                                <h4>宠物医疗</h4>
                                <p class="p14">宠物的医疗保养也越来越受到大家的关注</p>
                            </div>
                            <div class="service_top2">
                                <h4>宠物饮食</h4>
                                <p class="p14">宠物的饮食和营养也越来越受到大家的关注</p>
                            </div>
                            <div class="service_top3">
                                <h4>宠物寄养</h4>
                                <p class="p14">因为宠物的种类多，各自的生活习性不同，对营养的需求也不尽相同</p>
                            </div>
                            <div class="service_top4">
                                <h4>宠物美容</h4>
                                <p class="p14">所谓的宠物美容就是借助美容用品和修剪技法和染色激发增添美感</p>
                            </div>
                            <div class="service_top5">
                                <h4>宠物护理</h4>
                                <p class="p14">让宠物的外观得到美化和环保变得更健康和时尚</p>
                            </div>
                            <div class="service_top6">
                                <h4>宠物训练</h4>
                                <p class="p14">让它觉得这段时间充满了乐趣，从而增强宠物与主人的感情</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 下一页箭头 -->
            <div class="arrow "></div>
        </div>
        <div class="section section4">
            <!--团队风采-->
            <diV class="team">
                <div class="container">
                    <div class="title">
                        <img src="static/images/h_1.png" class="title_img">
                        <div class="title_top">
                            <h2>医疗团队</h2>
                            <span>

                                Medical Team</span>
                        </div>
                        <img src="static/images/h_2.png" class="title_img">
                    </div>
                    <section class="team-box">
                        <div id="owl-demo2" class="owl-carousel team-list wow fadeInUp">
                            <div class="item">
                                <a href="about.html">
                                    <img src="static/images/t1.jpg" />
                                    <p class="name-t">DRIVE LI</p>
                                    <div class="team-abs">
                                        <h3>宠物医院眼科</h3>
                                        <p>眼科专家</p>
                                    </div>
                                </a>
                            </div>
                            <div class="item">
                                <a href="about.html">
                                    <img src="static/images/t2.jpg" />
                                    <p class="name-t">JAKE LI</p>
                                    <div class="team-abs">
                                        <h3>宠物医院骨科科</h3>
                                        <p>骨科专家</p>
                                    </div>
                                </a>
                            </div>
                            <div class="item">
                                <a href="about.html">
                                    <img src="static/images/t3.jpg" />
                                    <p class="name-t">Aaron LI</p>
                                    <div class="team-abs">
                                        <h3>宠物医院皮肤科</h3>
                                        <p>皮肤科专家</p>
                                    </div>
                                </a>
                            </div>
                            <div class="item">
                                <a href="about.html">
                                    <img src="./img/下载.png" />
                                    <p class="name-t">XUKUN CAI</p>
                                    <div class="team-abs">
                                        <h3>宠物医院普外科</h3>
                                        <p>宠物鸡科专家</p>
                                    </div>
                                </a>
                            </div>
                            <div class="item">
                                <a href="about.html">
                                    <img src="./img/下载.png" />
                                    <p class="name-t">KIKI LI</p>
                                    <div class="team-abs">
                                        <h3>宠物医院肿瘤科</h3>
                                        <p>鸡科专家</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </section>

                </div>
            </div>

            <!--萌宠医疗-->
            <div>

                <!-- 网站备案信息 -->
                <div class="beian">
                    <center>
                        <p class="ppp"> Web前端设计16组作品</p>
                        <a href=https://beian.miit.gov.cn/#/Integrated/index>豫ICP备2022008027号-2</a>
                    </center>
                </div>
            </div>

        </div>
        <script src="static/js/main.js"></script>
        <script src="static/js/bootstrap.min.js"></script>
        <script src="static/js/TouchSlide.1.1.js"></script>
        <script src="static/js/owl.carousel.js"></script>
        <script src="static/js/jquery.cubeportfolio.min.js"></script>
        <script src="static/js/portfolio-masonry-4col.js"></script>

</body>
</html>